let a = document.querySelector('.box>ul>li>a')
console.log(a)
// 1 节点的父节点 parentNode
let li = a.parentNode
// 设置父节点的list-style样式
li.style.listStyle = 'none'
// 找ul
let ul = li.parentNode
// ul.style.setProperty('padding-left', '0')
ul.style['padding-left'] = '0'

// 找元素的所有父级节点
while (1) {
  let parent = a.parentNode
  if (!parent) {
    break
  }
  // console.log(parent, parent.nodeType)
  // if (parent.nodeType === 9) {
  //   let childNodes = parent.childNodes
  //   console.log(childNodes[0], childNodes[0].nodeType)
  // }
  a = parent
}

a = document.querySelector('.box>ul>li>a')
// 2 活动节点的所有直接子节点集合
let nodesList = a.childNodes
for (let i = 0; i < nodesList.length; i++) {
  let item = nodesList[i]
  // console.log(item, item.nodeType, item.nodeName, item.nodeValue)
}

// console.log(Node.DOCUMENT_NODE === 9) //
// const N = 20
// console.log(N === 20)

// 3 获得第一个子节点
let firstChild = a.firstChild
console.log(firstChild, firstChild.nodeType)

// 4 获得最后一个节点
let lastChild = a.lastChild
console.log(lastChild, lastChild.nodeType)

// 5 下一个节点
let next = a.nextSibling
console.log(next, next.nodeType)
let div = next.nextSibling
console.log(div) // <div>hello</div>

// 6 上一个节点previousSibling
// a中的img如何通过节点查找方式获得
let img = a.firstChild.nextSibling
console.log(img)
// a中的span
let span = img.nextSibling.nextSibling
span.style.setProperty('color', 'red')
let rt = span.previousSibling.previousSibling
rt.style.border = '5px solid red'
